<template>
  <view class="header">
    <view class="header-left">
      <image
        src="https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/waimaoWeb/basicprofile.jpeg"
        class="header-left-img"
        mode="widthFix"
      ></image>
    </view>

    <el-menu
      class="hrader-conter"
      mode="horizontal"
      @select="handleSelect"
      :default-active="defaultActive"
      active-text-color="#b7922d"
      text-color="#4b5563"
    >
      <el-menu-item
        v-for="(item, index) in meunList"
        :key="index"
        :index="item.path"
        >{{ item.name }}</el-menu-item
      >
    </el-menu>
    <view class="header-right">
      <el-input
        v-model="keyword"
        :prefix-icon="Search"
        style="width: 240px"
        @change="wordSearch"
        placeholder="Search products..."
      />
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
const props = defineProps({
  meunList: {
    type: Array,
    default: () => [],
  },
  routePath: {
    type: String,
    default: "",
  },
});

const keyword = ref(""); //搜素条件
const defaultActive = ref(props.routePath); //默认选中

//菜单选中事件
const handleSelect = (key, keyPath) => {
  uni.navigateTo({ url: `/${key}` });
};

// 搜索事件
const wordSearch = (val) => {
  console.log(val);
};
</script>
<style scoped lang="scss">
.header {
  width: 100%;
  min-width: 1200px;
  height: 80px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;

  .header-left {
    display: flex;
    align-items: center;
    margin-right: 20px;

    .header-left-img {
      width: 50px;
      height: 50px;
    }
  }

  .hrader-conter {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;

    .el-menu-item {
      height: 100%;
      line-height: 80px;
      font-size: 16px;
      font-weight: 500;
      color: #333;
      border: none !important;
      background: none;
    }

    .el-sub-menu {
      height: 100%;
      line-height: 80px;
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }

    .el-sub-menu__title {
      height: 100%;
      line-height: 80px;
    }
  }

  .header-right {
    display: flex;
    align-items: center;
    margin-left: 20px;
  }
}
</style>
